import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import { NumberDivide, DateDiff, FormatnumberZero, Mover, DateStamp } from '@/function.js';

// 视图插件
import {
  BackTop,
  Empty,
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
} from 'antd';
import { TimelineChartFu } from '@/components/Charts';

// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Loading from '@/components/Loading/Loading';

// css OR less预编译器
import styles from './All.less';
import StockChart from '../../StockSystem/Forecast/StockChart';

// 图片

/**
 *  Describe:数据连接
 *  Created by xjc on 2019/5/15
 */

@connect(({ fu, loading }) => ({
  fu,
  loading: loading.models.fuRule,
}))
@Form.create()
class Fundanalysis extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   *  Created by xjc on 2019/5/15
   */

  state = {
    index: 0,
  };

  changeIndex(s) {
    this.setState({
      index: s,
    });
  }

  /**
   *  Describe:视图
   *  Created by xjc on 2019/5/15
   */

  render() {
    const {
      loading,
      fu: { charts },
    } = this.props;
    const { index } = this.state;
    const list = [];
    if (charts.length !== 0) {
      for (let i = 0; i < charts.length; i++) {
        list.push(
          <Col md={12} sm={24}>
            <Card
              hoverable
              bodyStyle={{ padding: '12px 4px' }}
              style={{ width: '98%', marginTop: '3%', marginLeft: '1%', marginBottom: '3%' }}
              onClick={this.changeIndex.bind(this, i)}
            >
              <TimelineChartFu
                height={350}
                data={charts[i].list}
                titleMap={{ y1: '新二号', y2: 'SPY', y3: '差值', y4: '比较值' }}
              />
              <div style={{ textAlign: 'center', marginLeft: '2%', fontWeight: '600' }}>
                {charts[i].name}
              </div>
            </Card>
          </Col>
        );
      }
    }
    return (
      <PageHeaderWrapper title="新二号基金净值">
        <Card>
          {charts.length === 0 ? (
            <Loading />
          ) : (
            <div>
              <div
                style={{
                  textAlign: 'center',
                  marginLeft: '-1%',
                  fontWeight: '600',
                  fontSize: '1rem',
                }}
              >
                {charts[index].name}&nbsp;&nbsp;
                {charts[index].list[charts[index].list.length - 1].x} 涨幅：
                {`${(
                  ((charts[index].list[charts[index].list.length - 1].y1 -
                    charts[index].list[charts[index].list.length - 2].y1) /
                    charts[index].list[charts[index].list.length - 2].y1) *
                  100
                ).toFixed(2)}%`}
                &nbsp;&nbsp;spy涨幅：
                {`${(
                  ((charts[index].list[charts[index].list.length - 1].y2 -
                    charts[index].list[charts[index].list.length - 2].y2) /
                    charts[index].list[charts[index].list.length - 2].y2) *
                  100
                ).toFixed(2)}%`}
              </div>
              <div
                style={{
                  position: 'absolute',
                  width: '20px',
                  wordWrap: 'break-word',
                  marginTop: 280,
                }}
              >
                超额收益
              </div>
              <div
                style={{
                  position: 'absolute',
                  right: 16,
                  top: 0,
                  width: '20px',
                  wordWrap: 'break-word',
                  marginTop: 280,
                }}
              >
                净值
              </div>
              <TimelineChartFu
                height={628}
                orSliderGen
                data={charts[index].list}
                titleMap={{ y1: '新二号', y2: 'SPY', y3: '比较值' }}
              />
              <br />
              <br />
              <Row>{list}</Row>
            </div>
          )}
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    const { dispatch } = this.props;
    /* 导入列表数据 */
    dispatch({
      type: 'fu/GetGroupFu',
      callback: res => {},
    });
  }

  componentWillUnmount() {}
}

export default Fundanalysis;
